<template>
  <div>
    <el-card  v-for="(dep,index) in depList" :key="dep.id">
      <el-row>
        <el-col :span="6">{{dep.name}}</el-col>
        <!-- <el-col :span="6"><el-link :href="baseUrl+dep.furl" target="_blank">{{dep.fname}}</el-link></el-col> -->
        <el-col :span="6"><el-link  @click.native="openFile(dep.furl)">{{dep.fname}}</el-link></el-col>
        <el-col :span="6"><el-button @click="showDialog(index)">上传</el-button></el-col>
      </el-row>
    </el-card>
    <el-dialog title='导入数据' v-model="isShowDialog" width="40%">
    <!-- 上传部分 -->
    <el-upload
      class="upload-demo"
      ref="refUpload"
      drag
      :limit="1"
      :action="uploadUrl"
      :auto-upload="false"
      :accept="accept"
      :on-success="handleSuccess"
      :on-error="handleError"
    >
      <el-icon class="el-icon-upload"><elementUploadFilled class="icon-upload" /></el-icon>
      <div class="el-upload__text">
        拖拽文件到这里 或<em>点击上传</em>
      </div>
      <template #tip>
        <div class="el-upload__tip">
          请按照模板格式进行上传，仅支持<span>{{accept}}</span>文件
        </div>
      </template>
    </el-upload>
    <!-- 底部确认框 -->
    <template #footer >
      <div class="dialog-footer">
        <el-button @click="isShowDialog = false">取 消</el-button>
        <el-button type="primary" :loading="uploadBtnLoading" @click="uploadFile()">确 定</el-button>
      </div>
    </template>
  </el-dialog>


  </div>
  
</template>

<script>
import { reactive, ref, toRefs } from 'vue'
import axios from 'axios';
import service from '/@/utils/request';
import { ElMessage } from 'element-plus';
export default{
  setup(){
    const refUpload = ref()
    const state = reactive({
      uploadUrl: import.meta.env.VITE_API_URL +  '/admin/upload/pdf',
      isShowDialog: false,
      isViewPdf:false,
      pdfUrl:'',
      uploadBtnLoading:false,
      accept:'.pdf,.doc,.docx',
      depList:[],
      currentIndex: 0,
      baseUrl:import.meta.env.VITE_API_URL
    })
    const openFile = (furl)=>{
      axios({
        method: 'get',
        url: state.baseUrl + furl,
        responseType:'arraybuffer'
      }) 
      .then((response)=> {
        let blob = new Blob([response.data], { type: 'application/pdf;chartset=UTF-8' })
        let url = URL.createObjectURL(blob)
        window.open(url)
      });
		}
    const editData = async (params) => { // 添加所有数据
      state.uploadBtnLoading = true
      let dataInfo = await service.post('/admin/adep/update', params) // 获取数据
      if (dataInfo.code === 200) { ElMessage.success(dataInfo.msg); getDepData()} 
      else { ElMessage.error(dataInfo.msg); }
      state.uploadBtnLoading = false
    }
    const getDepData = async () => { // 获取角色数据
      let dataInfo = await service.get('/admin/adep/getList') // 获取数据
			if (dataInfo.code === 200) {
				state.depList = dataInfo.data.data
      } else {
				ElMessage.error('获取部门列表信息失败！')
      }
    }
		getDepData();
    const showDialog = (index) =>{ // 上传失败
      state.currentIndex = index
      state.isShowDialog = true
    }
    const handleSuccess = (response, file) =>{ // 上传成功
      if (response.code == 200) {
        state.depList[state.currentIndex].furl = response.path
        state.depList[state.currentIndex].fname = file.name
        let data = new FormData()
        data.append('id',state.depList[state.currentIndex].id)
        data.append('furl',state.depList[state.currentIndex].furl)
        data.append('fname',state.depList[state.currentIndex].fname)
        editData(data)
        ElMessage.success(response.msg);
      }else{
        ElMessage.error(response.msg);
      }
      state.uploadBtnLoading = false
      state.isShowDialog = false
    }
    const handleError = (response) =>{ // 上传失败
      ElMessage.error(response.msg);
      state.uploadBtnLoading = false
    }

    const uploadFile = () =>{ // 上传按钮点击后，触发事件
      if(refUpload.value.uploadFiles.length !== 0){
        state.uploadBtnLoading = true
        refUpload.value.submit()
      }else{
        ElMessage.warning('请选择文件进行上传')
      }
    }

    return {
      refUpload,
      ...toRefs(state),
      openFile,
      showDialog,
      handleSuccess,
      handleError,
      uploadFile,
    }
  }
}
</script>
<style scoped>
.el-upload-dragger {
  height: 30px;
}
.upload-demo{
  text-align: center;
}
.el-icon-upload{
  width: 50%;
  height: 70%;
}
.icon-upload{
  width: 90%;
  height: 90%;
  color: rgb(192, 196, 204);
  padding-top: 5%;
}
</style>